<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">    

    <ui:composition template="/template.xhtml">        
        <ui:define name="title">
            <h:outputText value="#{periodo.TituloCrearNuevo}"></h:outputText>
        </ui:define>

        <ui:define name="body">                        
            <h:form id="frmCrearPeriodos" style="font-size: small" enctype="multipart/form-data">                                
                <p:panel header="Nuevo Período" style="background: white" >                    
                    <p:accordionPanel multiple="true">
                        <p:tab title="Parámetros Día">
                            <center>
                                <h:form id="frmParametrosDia">
                                    <p:panelGrid columns="2">

                                        <f:facet name="header">
                                            <p:row>
                                                <p:column colspan="2">Selección de Ruta</p:column>
                                            </p:row>
                                        </f:facet>

                                        <p:outputLabel value="*Ruta:"/>                                            
                                        <p:selectOneMenu styleClass="menu" panelStyleClass="panel" id="console1" 
                                                         required="true"
                                                         value="#{periodoController.selected.rutaNombre}" 
                                                         style="width: 200px">
                                            <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" />                            
                                            <f:selectItems value="#{rutaController.rutasDisponibles}" var="rutasPeriodos"
                                                           itemLabel="#{rutasPeriodos.codigo} - #{rutasPeriodos.nombre}" itemValue="#{rutasPeriodos.nombre}"/>
                                            <p:ajax update="console2" listener="#{periodoController.cargarTipoRuta()}"/>
                                        </p:selectOneMenu>                                               

                                        <p:outputLabel value="*Tipo de día:"/>
                                        <p:selectOneMenu styleClass="menu" panelStyleClass="panel" id="console2" 
                                                         value="#{periodoController.selected.tipoDia}" 
                                                         style="width: 200px">                                            
                                            <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" />                            
                                            <f:selectItems value="#{periodoController.tipoDias}" var="tipoDia"/>                                                                                             
                                            <p:ajax  listener="#{periodoController.cargarHoras}" 
                                                     update="time1,numBus,codigoBus,inicioBus,finBus"/>
                                        </p:selectOneMenu> 

                                        <p:outputLabel value="Codigo:" style="text-align: right"/>
                                        <p:outputLabel id="codigoBus" value="#{periodoController.ruta.codigo}"  style="width: 200px" />                                                                               

                                        <p:outputLabel value="Hora de Inicio:" style="text-align: right"/>
                                        <p:outputLabel id="inicioBus" value="#{periodoController.ruta.inicioHora}"  style="width: 200px" />

                                        <p:outputLabel value="Hora de Fin:" style="text-align: right"/>
                                        <p:outputLabel id="finBus" value="#{periodoController.ruta.finHora}"  style="width: 200px" />

                                        <p:outputLabel value="Nro Unidades:" style="text-align: right"/>
                                        <p:outputLabel id="numBus" value="#{periodoController.selected.numBus}"  style="width: 200px" />

                                    </p:panelGrid>                                       

                                    <p:panelGrid style="font-size: small; margin-top:20px">
                                        <f:facet name="header">
                                            <p:row>
                                                <p:column colspan="5">Parámetros Día</p:column>
                                            </p:row>

                                            <p:row>
                                                <p:column>Hora</p:column>
                                                <p:column>Intervalo</p:column>
                                                <p:column>Ciclo</p:column>
                                                <p:column>Tipo</p:column>
                                            </p:row>                                
                                        </f:facet>

                                        <p:row>
                                            <p:column>
                                                <p:calendar id="time1" value="#{periodoController.selected.hora}" 
                                                            pattern="HH:mm" size="29" timeOnly="true"
                                                            locale="es" timeZone="America/Guayaquil"/>
                                            </p:column>
                                            <p:column>
                                                <p:calendar id="time2" value="#{periodoController.selected.intervalo}" 
                                                            pattern="HH:mm" size="29" timeOnly="true"
                                                            locale="es" timeZone="America/Guayaquil"/>
                                            </p:column>
                                            <p:column><p:calendar id="time3" value="#{periodoController.selected.ciclo}" 
                                                                  pattern="HH:mm" size="29" timeOnly="true"
                                                                  locale="es" timeZone="America/Guayaquil"/>
                                            </p:column>

                                            <p:column>
                                                <p:selectOneMenu id="console3" value="#{periodoController.selected.tipo}" style="width: 200px">
                                                    <f:selectItem itemLabel="Seleccione..." itemValue="" />                            
                                                    <f:selectItem itemLabel="VALLE" itemValue="VALLE" />                            
                                                    <f:selectItem itemLabel="PICO" itemValue="PICO" />                                                                
                                                </p:selectOneMenu>
                                            </p:column>
                                        </p:row>

                                        <p:row>
                                            <p:column colspan="5">
                                                <center>
                                                    <p:commandButton update="basicDT, dgError" 
                                                                     action="#{periodoController.agregarPeriodo()}" 
                                                                     value="Agregar"/>
                                                </center>
                                            </p:column>
                                        </p:row>
                                    </p:panelGrid>

                                    <p:dialog id="dgError" header="Error" 
                                              visible="#{periodoController.periodoRepetidoLista}">
                                        <p:outputLabel value="Período repetido"/>
                                    </p:dialog> 

                                    <p:dataTable id="basicDT" var="car" value="#{periodoController.periodos}" 
                                                 style="font-size: small; margin-top:20px"
                                                 rowKey="#{car.id}">

                                        <f:facet name="header">
                                            Almacenamiento parámetros día
                                        </f:facet>
                                        <p:column headerText="Hora">
                                            <p:outputLabel value="#{car.hora}">  
                                                <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                            </p:outputLabel>                 

                                        </p:column>
                                        <p:column headerText="Intervalo">
                                            <p:outputLabel value="#{car.intervalo}">
                                                <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                            </p:outputLabel>

                                        </p:column>
                                        <p:column headerText="Ciclo">
                                            <p:outputLabel value="#{car.ciclo}">
                                                <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                            </p:outputLabel>
                                        </p:column>
                                        <p:column headerText="Tipo">
                                            <p:outputLabel value="#{car.tipo}">
                                                <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                            </p:outputLabel>

                                        </p:column>
                                        <p:column headerText="">
                                            <p:commandButton action="#{periodoController.eliminarPeriodo(car.id)}" value="Eliminar"
                                                             update="basicDT"/>
                                        </p:column>
                                    </p:dataTable>
                                </h:form>
                            </center>
                        </p:tab>
                        <p:tab title="Programación">
                            <right>
                                <p:commandButton update="basicDT2, basicDT3, btnValidar" 
                                                 action="#{periodoController.previsualizar()}" value="Previsualizar"
                                                 style="font-size: small"/>
                            </right>
                            <p:dataTable id="basicDT2" var="car2" value="#{periodoController.plantilla}" 
                                         style="font-size: small; margin-top:20px">

                                <f:facet name="header">
                                    Tabla de Trabajo
                                </f:facet>
                                <p:column headerText="Nro." style="width: 50px">
                                    <p:outputLabel value="#{car2.nro}" />
                                </p:column>
                                <p:column headerText="Vuelta" style="width: 50px">
                                    <p:outputLabel value="#{car2.vuelta}" />
                                </p:column>
                                <p:column headerText="Unidad" style="width: 50px">
                                    <p:outputLabel value="#{car2.unidad}" />
                                </p:column>
                                <p:column headerText="Hora de Salida" style="width: 150px">
                                    <p:outputLabel value="#{car2.horaSalida}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Hora de Retorno" style="width: 150px">
                                    <p:outputLabel value="#{car2.horaLlegada}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Ciclo" style="width: 150px">
                                    <p:outputLabel value="#{car2.ciclo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Intervalo" style="width: 150px">
                                    <p:outputLabel value="#{car2.intervalo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Tiempo en Anden" style="width: 150px">
                                    <p:outputLabel value="#{car2.tiempoAnden}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                            </p:dataTable>                            
                        </p:tab>
                        <p:tab title="Resumen">
                            <h:commandLink value="Exporta a Excel" style="font-size: small">
                                <p:dataExporter type="xls" target="basicDT3" fileName="ResumenTrabajo" />
                            </h:commandLink> | 
                            <h:commandLink value="Exporta a PDF" style="font-size: small">
                                <p:dataExporter type="pdf" target="basicDT3" fileName="ResumenTrabajo" />
                            </h:commandLink>
                            <p:dataTable id="basicDT3" var="item" 
                                         value="#{periodoController.resumen}" 
                                         style="font-size: small; margin-top:20px">

                                <f:facet name="header">
                                    Resumen de Trabajo
                                </f:facet>

                                <p:column headerText="Unidad" style="width: 50px">
                                    <p:outputLabel value="#{item.unidad}" />
                                </p:column>
                                <p:column headerText="Vueltas por Unidad" style="width: 50px">
                                    <p:outputLabel value="#{item.vuelta}" />
                                </p:column>
                                <p:column headerText="Kilómetros por Unidad" style="width: 50px">
                                    <h:outputText value="#{item.kilometro}">
                                        <f:convertNumber pattern="#0.00" />
                                    </h:outputText>
                                </p:column>                               
                            </p:dataTable>                            
                            <br/>                            
                            <p:commandButton id="btnValidar"
                                             value="Guardar Periodos" update="confRepetidos, confNuevos"
                                             actionListener="#{periodoController.validarIngreso()}"/>

                            <p:confirmDialog id="confRepetidos" 
                                             header="Confirmación"
                                             severity="alert"
                                             widgetVar="confirmar" 
                                             visible="#{periodoController.periodosRepetidos!=null}">

                                <f:facet name="message">
                                    Existen periodos registrados, 
                                    se reemplazarán los antiguos por los nuevos.<br/>
                                    <h:outputFormat value="#{periodoController.periodosRepetidos}" 
                                                    escape="false"/>
                                    ¿Desea continuar?
                                </f:facet>

                                <p:commandButton id="confirmRepetido" value="Si" oncomplete="confRepetidos.hide()" 
                                                 action="#{periodoController.crearPeriodo()}"/>  
                                <p:commandButton id="declineRepetido" value="No" onclick="confRepetidos.hide()" type="button" />   
                            </p:confirmDialog>

                            <p:confirmDialog id="confNuevos" 
                                             message="¿Está seguro de guardar los períodos?"
                                             header="Confirmación"
                                             severity="alert"
                                             widgetVar="confirmar" 
                                             visible="#{periodoController.periodosNuevos}">

                                <p:commandButton id="confirmNuevo" value="Si" oncomplete="confNuevos.hide()" 
                                                 action="#{periodoController.crearPeriodo()}"/>  
                                <p:commandButton id="declineNuevo" value="No" onclick="confNuevos.hide()" type="button" />   
                            </p:confirmDialog>
                        </p:tab>
                    </p:accordionPanel>
                </p:panel>                             

                <p:dialog header="Información de Ruta " widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                    <p:outputPanel id="carDetail" style="text-align:center;">
                        <p:panelGrid  columns="2" columnClasses="label,value">

                            <h:outputText value="Codigo:" />
                            <h:outputText value="#{periodoController.ruta.codigo}" />

                        </p:panelGrid>
                    </p:outputPanel>
                </p:dialog>

            </h:form>
        </ui:define>
    </ui:composition>
</html>

